<template>
  <van-swipe :autoplay="3000" style="height: 166px;width:335px"  lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <div class="swiperTitle">{{image.title}}</div>
    <img class="lunbo" :src="image.src" />
  </van-swipe-item>
</van-swipe>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core';
import axios from 'axios'
export default {
   setup() {
    const state = reactive({ 
       images:[]
    })
    onMounted(()=>{
      axios.get("/api/lunbo").then(res => {
							// axios 自欧东包装data属性 res.data
							console.log(res.data)
              state.images = res.data
              
						}).catch(err => {
							console.log(err);
			})
    })
    return { 
      ...toRefs(state)
    };
  },
}
</script>

<style>

.swiperTitle{
  position: absolute;
  width: 100%;
  color: #fff;
  top: 90px;
  text-align: center;
}
.van-swipe{
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
}
 .lunbo{
   width: 100%;
   height: 100%;
   border-radius: 6px;
 }
.van-swipe__indicator{
      border: 2px solid #fff;
      cursor: pointer;
      width: 10px;
      height: 10px;
      background: none;
    }
  .van-swipe__indicator--active{
      border: 2px solid #fff;
      background-color: #fff;
    }
  .van-swipe__indicators{
    top: 70%;
  }
</style>